/* Prevent horizontal overflow and ensure proper box sizing */
html, body {
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100vw;
}

*, *:before, *:after {
    box-sizing: inherit;
}

@media (max-width: 600px) {
    body, .main-container, .milestone-section {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    img, .milestone-image {
        max-width: 100%;
        height: auto;
        display: block;
    }
}
body {
    background: linear-gradient(90deg, #fff7f3 0%, #ffe6f0 100%);
    /* Soft light background matching the top bar's warm gradient */
    min-height: 100vh;
    margin: 0;
    font-family: inherit;
}

.milestone-timeline-container {
    display: flex;
    justify-content: center;
    margin: 2em 0;
    position: relative;
    z-index: 1;
}

.milestone-timeline {
    position: relative;
    width: 90%;
    max-width: 900px;
    min-height: 600px;
    margin: 0 auto;
}

.milestone-timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #e76a3c 0%, #e85d8e 100%);
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 2px;
}

.milestone-year {
    width: 50%;
    text-align: center;
    font-size: 1.1em; /* Decreased from 1.5em */
    font-weight: bold;
    margin: 2em 0 1em 0;
    position: relative;
    z-index: 2;
}

.milestone-year.left {
    width: auto;
    text-align: right;
    color: #43b02a;
    padding-right: 1em;
    margin-right: 26em; /* Increase this value for more gap */
    position: relative;
}

.milestone-year.right {
    left: 50%;
    text-align: left;
    color: #43b02a;
    padding-left: 1.5em; /* Increased gap from center line */
}

.milestone-card {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 50%;
    position: relative;
    z-index: 2;
}

.milestone-card.left {
    left: 0;
    align-items: flex-end;
    text-align: right;
}

.milestone-card.right {
    left: 50%;
    align-items: flex-start;
    text-align: left;
}

.milestone-card-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(231, 106, 60, 0.08);
    padding: 1em 1.5em;
    width: 90%;
    position: relative;
    margin-bottom: 1em;
    text-align: center;
    font-size: 0.75em; /* Decreased font size for card text */
}

.milestone-card.left .milestone-card-content {
    margin-right: 2em;
}

.milestone-card.right .milestone-card-content {
    margin-left: 2em;
}

.milestone-card-content h3,
.milestone-card-content h4 {
    background: linear-gradient(90deg, #e76a3c 0%, #e85d8e 100%);
    color: #fff;
    padding: 0.3em 0.7em;
    border-radius: 5px;
    margin-bottom: 0.5em;
    font-size: 1.5em; /* Decreased from 1.1em */
}

.milestone-img {
    width: 100%;
    max-width: 405px;
    margin: 0.5em 0;
    border-radius: 6px;
    display: block;
}

@media (max-width: 900px) {
    .milestone-timeline {
        width: 100%;
    }
    .milestone-year,
    .milestone-card,
    .milestone-card.left,
    .milestone-card.right {
        width: 100%;
        left: 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .milestone-card-content {
        margin: 0 0 1em 0 !important;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .milestone-card,
    .milestone-card.left,
    .milestone-card.right {
        width: 90vw !important;
        padding: 6px 4px !important;
        font-size: 0.8em !important;
        margin: 14px auto !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .milestone-card-content {
        font-size: 0.75em !important;
        padding: 4px !important;
    }
    .milestone-card-content img,
    .milestone-img {
        max-width: 80vw !important;
        height: auto !important;
        margin: 0 auto 8px auto !important;
        display: block !important;
    }
}